<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 查看邮件</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/template.css" rel="stylesheet">

    <style>
        .content{
            min-height: 500px;
        }
        table,tr,td{border:solid 1px;}
        table value{
            border-bottom: 0;
        }
        table value input,
        table value select{
            width: 100%;
        }
        table value input[type=number] {
            -moz-appearance:textfield;
        }
        table value input[type=number]::-webkit-inner-spin-button,
        table value input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
    <script>
        var master = ${master };
        var data = {
            master:master.id,
            name:master.name,
            collectAddress:master.collectAddress
        };
    </script>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <div class="mail-box-header" style="border: 0;padding: 0;">
                                <div class="pull-right tooltip-demo">
                                    <a href="javascript:history.go(-1);" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="返回"><i class="fa fa-reply"></i> 返回</a>
                                </div>
                                <h2>被征收人：${master.name }</h2>
                                <div class="space-25"></div>
                                <p><i class="fa fa-home"></i> 原房屋坐落：${master.collectAddress }</p>
                                <p><i class="fa fa-street-view"></i> 联系地址：${master.contactAddress }</p>
                                <p><i class="glyphicon glyphicon-earphone"></i> 联系电话：${master.contactPhone }</p>
                                <p><i class="fa fa-credit-card"></i> 证件号：${master.idNo }</p>
                            </div>
                            <div class="space-25"></div>
                            <h5>电子存档 <i id="electronic-add" class="fa fa-plus-circle" style="float: right;cursor: pointer;" title="新增存档"></i></h5>
                            <ul id="archive-list" class="folder-list m-b-md" style="padding: 0">
                            <c:forEach items="${master.archives }" var="archive">
                                <li><a href="javascript:archives(${archive.id });"><i class="fa fa-briefcase"></i> ${archive.template.name }(${archive.code })</a></li>
                            </c:forEach>
                            </ul>
                            <h5>扫描件存档 <i id="accessory-add" class="fa fa-cloud-upload" style="float: right;cursor: pointer;" title="新增归档"></i></h5>
                            <ul id="file-list" class="folder-list m-b-md" style="padding: 0">
                                <c:forEach items="${master.collections }" var="collection">
                                    <li><a href="javascript:files(${collection.id });"><i class="fa fa-file"></i> ${collection.name }</a></li>
                                </c:forEach>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="electronic" class="col-sm-9 animated fadeInRight" style="display: none;">
                <div class="mail-box-header" style="display: table;width: 100%;">
                    <label class="control-label" style="display: table-cell;width: 100px;">电子档案类型：</label>
                    <select name="archives-name" class="form-control m-b" style="display: table-cell;margin: 0;">
                    <c:forEach items="${templates }" var="template">
                        <option value="${template.id}">${template.name }</option>
                    </c:forEach>
                    </select>
                    <a class="input-group-addon save" href="#"><i class="fa fa-save"></i></a>
                    <a class="input-group-addon refresh" href="javascript:refresh();"><i class="fa fa-refresh"></i></a>
                    <a class="input-group-addon print" href="#"><i class="fa fa-print"></i></a>
                </div>
                <div class="mail-box">
                    <div class="mail-body content"></div>
                    <%--<div class="mail-body text-right tooltip-demo">--%>
                        <%--<button title="保存" class="btn btn-sm btn-primary save"><i class="fa fa-save"></i> 保存</button>--%>
                        <%--<button title="打印" class="btn btn-sm btn-white print"><i class="fa fa-print"></i> 打印</button>--%>
                    <%--</div>--%>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div id="accessory" data-id="" class="col-sm-9 animated fadeInRight" style="display: none;">
                <div class="mail-box-header" style="display: table;width: 100%;">
                    <label class="control-label" style="display: table-cell;width: 100px;">扫描件存档：</label>
                    <input type="text" placeholder="归档名称" class="form-control" disabled>
                </div>
                <div class="mail-box">
                    <div class="mail-body content"></div>
                    <div class="mail-body text-right tooltip-demo">
                        <button id="upload" title="上传" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> 上传</button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- 全局js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <%--<script src="../js/content.js?v=1.0.0"></script>--%>
    <!-- iCheck -->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="../js/jquery.form.js"></script>
    <script src="../js/date.extension.js"></script>

    <script src="../js/template.engine.js"></script>
    <script>
        var archive;
        var te;
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            /**
             * 选择电子档案类型事件
             */
            $('#electronic select').change(function () {
                data.template = $(this).val();
                template(data.template);
            });
            /**
             * 添加新的电子档案
             */
            $("#electronic-add").click(function () {
                $('#accessory').hide();
                $('#electronic').hide();
                $("#electronic select").find("option:first").attr("selected",true);
                $('#electronic select').change();
                $('#electronic').slideDown(0,function () {
                    $('#electronic .save').show();
                    $(this).find('select').attr('disabled',false);
                });
            });
            /**
             * 保存新的电子档案
             */
            $('#electronic .save').click(function () {
                data.data = JSON.stringify(te.data);
                $.post(
                    "${path}/api/household/save/archive",
                    data,
                    function (result) {
                        if(result.code == "${result_success}"){
                            layer.msg("保存成功");
                            $('#electronic .save').hide();
                            $('#electronic select').attr('disabled',true);
                            archive = result.data.template.id;
                            $('#archive-list').prepend('<li><a href="javascript:archives('+result.data.id+');"><i class="fa fa-briefcase"></i> '+result.data.template.name+'('+result.data.code+')'+'</a></li>');
                        }else{
                            layer.msg(result.data);
                        }
                    },
                    'json');
                return false;
            });
            $('#electronic .print').click(function () {
                if(te.data == {} || archive == undefined){
                    layer.msg("保存后才能打印");
                }else{
                    var data = {masterIds:master.id,archiveId:archive};
                    window.open("${path}/print?data="+JSON.stringify(data));
                }

                return false;
            });
            /**
             * 添加新的 扫描件存档集合
             */
            $("#accessory-add").click(function () {

                var html =
                    '<div class="ibox-content" style="overflow: hidden;height: 100%;">'+
                    '<form class="form-horizontal" method="post">' +
                    '   <div class="form-group"> '+
                    '       <div class="col-sm-12"><input name="name" type="text" class="form-control" placeholder="档案名次"></div> '+
                    '   </div> '+
                    '</form>'+
                    '</div>';
                layer.open({
                    type: 1,
                    area: ['300px','auto'],
                    title:'新建归档',
                    content: html,
                    btn:['保存','取消'],
                    yes: function(index, layero){

                        var name = $(layero).find('input[name="name"]').val();

                        $.post(
                            "${path}/api/household/save/collection",
                            {id:master.id,name:name},
                            function (result) {

                                if(result.code == "${result_success}"){

                                    $('#accessory').attr('data-id',result.data.id);
                                    $('#accessory .mail-box-header input').val(result.data.name);
                                    $('#file-list').prepend('<li><a href="javascript:files('+result.data.id+');"><i class="fa fa-file"></i> '+result.data.name+'</a></li>');

                                    layer.close(index);

                                    $('#accessory').hide();
                                    $('#electronic').hide();

                                    $('#accessory').slideDown(0);
                                }else{
                                    layer.msg(result.data);
                                }
                            },
                            'json');
                    }
                });
            });

            /**
             * 点击上传按钮
             */
            $('#upload').click(function () {
                upload($('#accessory').attr('data-id'));
            });
        });

        /**
         * 获取模板
         * @param id
         */
        function template(id) {
            $.post("${path}/api/template/get?id="+id,function (result) {
                if(result.code == "${result_success}"){

                    var _data = {};

                    for(var key in data){
                        _data[key] = data[key];
                    }

                    if(_data.year == undefined){
                        _data.year = new Date().getYear();
                    }
                    if(_data.month == undefined){
                        _data.month = new Date().getMonth()+1;
                    }
                    if(_data.day == undefined){
                        _data.day = new Date().getDay();
                    }

                    te = templateEngine();
                    var tp = te.parsing(result.data.template,_data);
                    $('#electronic .mail-body.content').html(tp);
                    te.input('#electronic .mail-body.content',_data);
                }else{
                    layer.msg('加载模板失败');
                }
            });
        }

        /**
         * 获取电子档案
         * @param id
         */
        function archives(id) {

            $.post(
                "${path}/api/household/get/archive",
                {id:id},
                function (result) {
                    if(result.code == "${result_success}"){

                        var archivesData = eval('('+result.data.data+')');

                        if(archivesData == null)
                            archivesData = data;
                        else
                            for(var key in data){
                                archivesData[key] = data[key];
                            }

                        var date = new Date();
                        date.setTime(result.data.createTime);

                        if(archivesData.year == undefined){
                            archivesData.year = date.getYear();
                        }
                        if(archivesData.month == undefined){
                            archivesData.month = date.getMonth()+1;
                        }
                        if(archivesData.day == undefined){
                            archivesData.day = date.getDay();
                        }

                        $('#accessory').hide();
                        $('#electronic').hide();
                        $("#electronic select option").attr("selected",false);
                        $("#electronic select option").each(function () {
                            if($(this).text() == result.data.template.name){
                                $(this).attr("selected",true);
                                return false;
                            }
                        });
                        te = templateEngine();
                        var tp = te.parsing(result.data.template.template,archivesData);
                        $('#electronic .mail-body.content').html(tp);
                        te.formula('#electronic .mail-body.content',data);

//                        data = archivesData;
                        archive = result.data.template.id;
                        $('#electronic').slideDown(0,function () {
                            $('#electronic .save').hide();
                            $(this).find('select').attr('disabled',true);
                        });

                        $('.refresh').attr('href','javascript:refresh('+id+');')
                    }else{
                        layer.msg(result.data);
                    }
                },
                'json');
        }

        /**
         * 获取文件列表
         * @param id
         */
        function files(id){

            $.post(
                "${path}/api/household/get/files",
                {id:id},
                function (result) {

                    if(result.code == "${result_success}"){

                        $('#accessory .mail-body.content').html('');
                        $(result.data).each(function () {
                            addFile2Panel(this);
                        });

                        $('#accessory').attr('data-id',id);

                        $('#accessory').hide();
                        $('#electronic').hide();

                        $('#accessory').slideDown(0);
                        
                    }else{
                        layer.msg(result.data);
                    }
                },
                'json');

        };

        function addFile2Panel(file) {
            var html = '\
                    <div class="file-box">\
                        <div class="file">\
                            <a href="#">\
                                <span class="corner"></span>\
                                <div class="icon"><i class="fa fa-file"></i></div>\
                                <div class="file-name">\
                                    '+file.name+'.'+file.suffix+'<br/>\
                                    <small>添加时间：'+new Date(file.createTime).pattern('yyyy-MM-dd hh:mm:ss')+'</small>\
                                </div>\
                            </a>\
                        </div>\
                    </div>';

            $('#accessory .mail-body.content').prepend(html);
        }

        /**
         * 上传文件
         */
        function upload(id) {

            var html ='\
                <div class="ibox-content" style="overflow: hidden;height: 100%;"> \
                    <form class="form-horizontal" method="post"> \
                        <div class="form-group"> \
                            <div class="col-sm-12"> \
                                <div class="input-group m-b">\
                                    <span class="input-group-btn"><button type="button" class="btn btn-primary" onclick="selectFile(this)"><i class="fa fa-upload"></i></button></span>\
                                    <input name="name" type="text" class="form-control" placeholder="文件名"> \
                                    <span class="input-group-addon">&nbsp;&nbsp;&nbsp;</span> \
                                    <input name="file" type="file" style="display: none;" onchange="changeFile(this)"> \
                                    <input name="id" type="text" style="display: none;" value="'+id+'"> \
                                </div> \
                            </div> \
                        </div> \
                        <div class="progress progress-striped active" style="margin-bottom: 0;"> \
                            <div style="width: 0%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-default">0%</div>\
                        </div> \
                    </form> \
                </div>';
            layer.open({
                type: 1,
                area: ['300px','auto'],
                title:'上传',
                content: html,
                btn:['上传','取消'],
                success:function (layero, index) {
                    $(layero).find('form input[name="progress"]').knob({'min':0,'max':100,'readOnly':true});
                },
                yes: function(index, layero){
                    var options ={
                        type: "post",
                        url: "${path}/api/household/upload",
                        dataType: "json",
                        uploadProgress: function (event, position, total, percentComplete) {
                            var progress = (position/total)*100;
                            var el = $(layero).find('.progress>div');
                            el.width(progress+'%');
                            el.attr('aria-valuenow',progress);
                            el.text(progress+'%');
                        },
                        success: function (result) {
                            if (result.code == "${result_success}") {
                                layer.close(index);
                                addFile2Panel(result.data);
                                layer.msg("保存成功！");
                            }else {
                                layer.msg(result.data);
                            }
                        }
                    };

                    $(layero).find('form').ajaxSubmit(options);
                }
            });
        }
        
        function selectFile(el) {
            $(el).parents('.input-group').children('input[name="file"]').click();
        }
        function changeFile(el) {
            var path = $(el).val();
            var pot = path.lastIndexOf(".");
            var suffix = path.substring(pot);
            var name = path.substring(path.lastIndexOf("\\")+1,pot);

            $(el).parents('.input-group').children('input[name="name"]').val(name);
            $(el).parents('.input-group').children('.input-group-addon').text(suffix);
        }
        function refresh(id) {

            $.post(
                "${path}/api/household/archive/refresh",
                {id:id},
                function (result) {
                    if(result.code == '${result_success}'){
                        layer.msg("更新成功");
                        archives(id);
                    }else{
                        layer.msg(result.data);
                    }
                },
                'json'
            );
        }
    </script>

</body>

</html>
